<template>
    <h2>Pinia开始</h2>
    <div class="container">
        <h2>当前求和结果为 {{countStore.sum}}</h2>
        <div class="handler">
            <!-- 这里的.number 可以吧收集到的数据转为数字类型 -->
            <select v-model.number="step">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
            </select>
            <button @click="add">+</button>
            <button @click="minus">-</button>
        </div>
        <h4>我叫{{name}},今年{{age}},我是{{sex}}!</h4> 
        <h4>我叫{{bigname}},今年{{bigage}},我是{{sex}}!</h4> 
        <button @click="changeStudent">下一个</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useCountStore } from '@/store/Count';
import { storeToRefs } from 'pinia';

const countStore = useCountStore()
// 注意 结构出来的数据 就丧失掉了响应式,所以需要用到 storeRefs 知识点
let {name,age,sex,bigage,bigname} = storeToRefs(countStore) 


let step = ref(1)
function add(){
    // pina 中的数据是响应式的，直接修改即可
    // 第一种写法
    // countStore.sum ++
    // 第二种写法 
    // countStore.$patch({
    //     sum : countStore.sum + step.value
    // })
    // 第二种写法变体
    // countStore.$patch((state) => { 
    //      state.sum += step.value
    // })
    // 第三种写法 action
    countStore.add(step.value)
}
interface student{
    name:string,
    age:number,
    sex:string
}
function changeStudent(){
    countStore.$patch(<student>{
        name:'saber',
        age:14,
        sex:'女'
    })
    // countStore.nextStudent()
}
function minus(){
    countStore.sum ++
}
</script>

<style scoped>
    .container{
        margin-top: 30px;
        background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
        color: white;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    .handler{
        width: 100px;
        display: flex;
        align-content: center;
        justify-content: space-around;
    }
</style>@/store/Count